<template>
	<div class="swiper-box">
	<swiper :options="swiperOption" v-if="swiperList.length">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
		<img :src="item.imgUrl" />
	</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
	name: 'IndexSwiper',
	props:{
		swiperList:Array
	},
	data:function(){
		return{
			swiperOption:{
				pagination:".swiper-pagination",
				loop:true   //可以循环
			}
		}
	}
}
</script>

<style>
	.swiper-box{
		width: 100%;
		height: 0;
		overflow: hidden;
		padding-bottom: 31%;
	}
	.swiper-box img{
		width: 100%;
	}
	.swiper-box .swiper-pagination-bullet-active{
		background: #fff;
	}
</style>
